<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            事件绑定
         -->
        <button v-on:click="show()">按钮1</button>
        <!-- 方法没有参数时，可以省略小括号 -->
        <button v-on:click="show">按钮2</button>
        <!-- 使用@替代v-on: -->
        <button @click="show">按钮3</button>
        <hr>

        <!-- 
            绑定多个事件
         -->
        <button @mouseover="show()" @mouseout="print()">绑定多个事件：方式1</button>
        <button v-on="{mouseover:show,mouseout:print}">绑定多个事件：方式2</button>
        <hr>

        <!-- 
            行内表达式：实现对变量的直接赋值
         -->
        <p>{{ msg }}</p>
        <button @click="setMsg">修改msg的值：方式1</button>
        <button @click="msg='world'">修改msg的值：方式2</button>
        <hr>

        <!-- 
            参数的传递
         -->
        <!-- 传递普通的值 -->
        <button @click="write('abc')">传参1</button>
        <button @click="write(25)">传参2</button>
        <!-- 传递数据仓库中的变量 -->
        <button @click="write(msg)">传参3</button>
        <!-- 将this作为参数，this指向Window对象，与原生js有所不同 -->
        <button @click="write(this)">传参4</button>
        <!-- 将$event作为参数，表示事件对象，包含事件的相关信息 -->
        <button @click="write($event)">传参5</button>

        <input type="text" @input="write($event.target.value)">

    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{ // 定义数据，称为数据仓库
            msg:'hello'
        },
        methods:{ // 定义方法，称为方法仓库
            show:function(){
                console.log('show方法。。。。。')
            },
            print(){ // ES6的简写方法，当对象的属性值为匿名函数时可以简写
                console.log('print方法。。。。。')
            },
            setMsg(){
                // console.log(this) // this表示当前Vue实例
                // console.log(this === vm)
                // 创建Vue实例时定义的数据和方法，在当前Vue实例的根属性上
                this.msg = 'world'
                // this.show()
            },
            write(args){
                console.log(args)
                // console.log(args.target)
            }
        },

    })
</script>
</html>